<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .clickBox,
        .showBox {
            display: flex;

            position: relative;
            margin-top: 20px;
        }

        li {
            list-style: none;
        }

        .clickBox>li {

            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid grey;
            margin-left: 20px;
            cursor: pointer;

        }

        .showBox {
            min-height: 300px;
            min-height: 300px;
        }

        .showBox>li {
            text-align: center;
            line-height: 300px;
            width: 300px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background-color: yellow;
            display: none;
        }

        .showBox .show {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
           
        }
    </style>
</head>

<body>
    <ul class="clickBox">
        <li>click01</li>
        <li>click02</li>
        <li>click03</li>
    </ul>
    <ul class="showBox">
        <li class="show">show01</li>
        <li>show02</li>
        <li>show03</li>
    </ul>
</body>
<script>
    $(function () {

        $(".clickBox li").click(function () {
            // console.log( $(".clickBox li"));
            //    var index = $(this).index();
            //     $(".showBox li").ep(index).addClass('show').siblings().removeClass('show');

            var index = $(this).index();
            $(this).parent().siblings().children().eq(ind  ex).addClass("show").css({"background":"pink"}).siblings().removeClass("show");

        })


    })

</script>

</html>